<template>
  <div class="flex">
    <el-card class="flex-1 m15" shadow="hover">
       <div class="flex text-center">
          <iconContent :data="2000" text="注册人数" background="#5465CF" icon="EditPen"></iconContent>
         <iconContent :data="34000" text="销售额" background="#8E98F2" icon="Operation"></iconContent>
         <iconContent :data="4000" text="订单数" background="#293483" icon="ChatSquare"></iconContent>
       </div>
        <div class="flex text-center">
          <iconContent :data="2000" text="注册人数" background="#6C71A2" icon="EditPen"></iconContent>
         <iconContent :data="34000" text="销售额" background="#58A7CE" icon="Operation"></iconContent>
         <iconContent :data="4000" text="订单数" background="#CE8E5A" icon="ChatSquare"></iconContent>
       </div>
    </el-card>
     <el-card class="flex-2 m15" shadow="hover">
      <echartsLine/>
    </el-card>
  </div>
   <div class="flex">
    <el-card class="flex-1 m15" shadow="hover">
      <echartsLine/>
    </el-card>
    <el-card class="flex-1 m15" shadow="hover">
      <echartsLine/>
    </el-card>
    <el-card class="flex-1 m15" shadow="hover">
      <echartsLine/>
    </el-card>
  </div>
</template>

<script>
import iconContent from './../../components/main/icon-content.vue'
import echartsLine from './../../components/ehcarts/main-line.vue'
export default {
  components: {
    iconContent,
    echartsLine
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      //  通过refs 获取一下div
      // $echarts.init() echarts实例
      // option
      // 实例.setOption(option)
    }
  }
}
</script>

<style scoped>


</style>